<script setup lang="ts">
import { ContentDetailWrap } from '@/components/ContentDetailWrap'
import { ref } from 'vue'
import { useI18n } from '@/hooks/web/useI18n'
import { useRouter, useRoute } from 'vue-router'
import { getInfoApi } from '@/api/inventory/index'
import { CurdData } from '@/api/inventory/types'
import { Descriptions } from '@/components/Descriptions'
import useSchema from './components/hooks/useSchema'
import { useCrudSchemas } from '@/hooks/web/useCrudSchemas'
import Currencies from './components/Currencies/index.vue'
import { getClassificationSelectListApi } from '@/api/logisticsClassification/index'
import { useAppStore } from '@/store/modules/app'

const { push, go } = useRouter()

const { query } = useRoute()

const { t } = useI18n()

// 移动端检测
const appStore = useAppStore()
const isMobile = computed(() => appStore.getMobile)

const currentRow = ref<Nullable<CurdData>>(null)

const ccList = ref([{ label: '全球', value: 0 }])

const getInventoryInfo = async () => {
  const res = await getInfoApi(query.id as string)
  const ccRes = await getClassificationSelectListApi({})
  ccList.value = [...ccList.value, ...ccRes.data]
  if (res) {
    currentRow.value = res.data
  }
}

getInventoryInfo()

const { crudSchemas } = useSchema({
  ccList
})
const { allSchemas } = useCrudSchemas(crudSchemas)
</script>

<template>
  <ContentDetailWrap
    :title="t('inventory.detail')"
    @back="push('/inventory/inventory-management')"
    :class="isMobile ? 'mobile-detail-wrap' : ''"
  >
    <template #header>
      <BaseButton @click="go(-1)">
        {{ t('common.back') }}
      </BaseButton>
    </template>

    <!-- 移动端详情描述视图 -->
    <div v-if="isMobile && currentRow" class="mobile-detail-content">
      <el-descriptions
        border
        :column="1"
        label-align="left"
        content-align="left"
        class="mobile-descriptions"
      >
        <el-descriptions-item :span="24" :label="t('inventory.id')">
          {{ currentRow.id || '-' }}
        </el-descriptions-item>

        <el-descriptions-item :span="24" :label="t('inventory.cname')">
          {{ (currentRow as any).product_name || '-' }}
        </el-descriptions-item>

        <el-descriptions-item :span="24" :label="t('inventory.hashRate')">
          {{ (currentRow as any).hashrate || (currentRow as any).hashRate || '-' }}
        </el-descriptions-item>

        <el-descriptions-item :span="24" :label="t('inventory.sku')">
          {{ currentRow.sku || '-' }}
        </el-descriptions-item>

        <el-descriptions-item :span="24" :label="t('inventory.warehouse')">
          {{ (currentRow as any).warehouse_value || '-' }}
        </el-descriptions-item>

        <el-descriptions-item :span="24" :label="t('inventory.is_futures')">
          {{ (currentRow as any).is_futures_value || '-' }}
        </el-descriptions-item>

        <el-descriptions-item :span="24" :label="t('inventory.source_table')">
          {{ (currentRow as any).source_table_value || '-' }}
        </el-descriptions-item>

        <el-descriptions-item :span="24" :label="t('inventory.arrival_date')">
          {{ (currentRow as any).arrival_date || '-' }}
        </el-descriptions-item>

        <el-descriptions-item :span="24" :label="t('inventory.real_arrival_date')">
          {{ (currentRow as any).real_arrival_date || '-' }}
        </el-descriptions-item>

        <el-descriptions-item :span="24" :label="t('inventory.inbound_batch')">
          {{ (currentRow as any).inbound_batch || '-' }}
        </el-descriptions-item>

        <el-descriptions-item :span="24" :label="t('inventory.last_audit_date')">
          {{ (currentRow as any).last_audit_date || '-' }}
        </el-descriptions-item>

        <el-descriptions-item :span="24" :label="t('inventory.initial_qty')">
          {{ (currentRow as any).initial_qty || '0' }}
        </el-descriptions-item>

        <el-descriptions-item :span="24" :label="t('inventory.available_qty')">
          {{ (currentRow as any).available_qty || '0' }}
        </el-descriptions-item>

        <el-descriptions-item :span="24" :label="t('inventory.convertible_qty')">
          {{ (currentRow as any).convertible_qty || '0' }}
        </el-descriptions-item>

        <el-descriptions-item :span="24" :label="t('inventory.lock_qty')">
          {{ (currentRow as any).lock_qty || '0' }}
        </el-descriptions-item>

        <el-descriptions-item :span="24" :label="t('inventory.currency')">
          {{ (currentRow as any).currency || '-' }}
        </el-descriptions-item>

        <el-descriptions-item :span="24" :label="t('inventory.price')">
          {{ (currentRow as any).price || '-' }}
        </el-descriptions-item>

        <el-descriptions-item :span="24" :label="t('inventory.first_leg_logistics_fee')">
          {{ (currentRow as any).first_leg_logistics_fee || '-' }}
        </el-descriptions-item>

        <el-descriptions-item :span="24" :label="t('inventory.is_sellable')">
          <el-tag :type="(currentRow as any).is_sale === 1 ? 'success' : 'danger'" size="small">
            {{ (currentRow as any).is_sale === 1 ? '可售' : '不可售' }}
          </el-tag>
        </el-descriptions-item>

        <el-descriptions-item :span="24" label="可售国家分类">
          {{ (currentRow as any).ccname_ids_value || '-' }}
        </el-descriptions-item>

        <el-descriptions-item :span="24" label="零库存预售">
          <el-tag
            :type="(currentRow as any).allow_zero_stock_sale === 1 ? 'success' : 'danger'"
            size="small"
          >
            {{ (currentRow as any).allow_zero_stock_sale === 1 ? '允许' : '不允许' }}
          </el-tag>
        </el-descriptions-item>

        <el-descriptions-item :span="24" :label="t('inventory.creator')">
          {{ (currentRow as any).creator_value || '-' }}
        </el-descriptions-item>

        <el-descriptions-item :span="24" :label="t('inventory.create_time')">
          {{ (currentRow as any).create_time || '-' }}
        </el-descriptions-item>

        <el-descriptions-item :span="24" :label="t('inventory.updater')">
          {{ (currentRow as any).updater_value || '-' }}
        </el-descriptions-item>

        <el-descriptions-item :span="24" :label="t('inventory.update_time')">
          {{ (currentRow as any).update_time || '-' }}
        </el-descriptions-item>
      </el-descriptions>

      <!-- 移动端汇率组件 -->
      <div class="mobile-currencies">
        <Currencies />
      </div>
    </div>

    <!-- 桌面端描述组件 -->
    <template v-else>
      <Descriptions :schema="allSchemas.detailSchema" :data="currentRow || {}" />
      <Currencies />
    </template>
  </ContentDetailWrap>
</template>

<style lang="less">
@import url('@/styles/global.less');

// 移动端样式
@media (width <= 968px) {
  .mobile-detail-wrap {
    :deep(.content-detail-wrap) {
      padding: 12px;
    }
  }

  .mobile-detail-content {
    .mobile-descriptions {
      margin-bottom: 16px;
    }

    .mobile-currencies {
      margin-top: 16px;
    }
  }
}

// 桌面端保持原有样式
@media (width >= 969px) {
  .mobile-detail-content {
    display: none;
  }
}
</style>
